<template>
  <div>
    <!-- 登录和注册 -->
    <div class="myCenter in-up-container my-animation-hideToShow">
      <!-- 背景图片 -->
      <el-image
        class="my-el-image"
        style="position: absolute"
        lazy
        :src="backgroundPath ? backgroundPath : $constant.bgImg"
        fit="cover"
      >
        <div slot="error" class="image-slot"></div>
      </el-image>
      <div class="in-up" id="loginAndRegist">
        <div class="form-container sign-up-container">
          <div class="myCenter">
            <h1>注册</h1>
            <input
              v-model="username"
              type="text"
              maxlength="30"
              placeholder="账号"
            />
            <input
              v-model="password"
              type="password"
              maxlength="30"
              placeholder="密码"
            />
            <input v-model="email" type="email" placeholder="邮箱"/>
            <input v-model="code" type="text" placeholder="验证码"/>
            <a style="margin: 0" href="#" @click="changeDialog">获取验证码</a>
            <button @click="register()">注册</button>
          </div>
        </div>
        <div class="form-container sign-in-container">
          <div class="myCenter">
            <h1>登录</h1>
            <input
              v-model="account"
              type="text"
              placeholder="账号"
            />
            <input v-model="password" type="password" placeholder="密码"/>
            <a href="#" @click="changeDialog()">忘记密码？</a>
            <button @click="login()">登录</button>
          </div>
        </div>
        <div class="overlay-container">
          <div class="overlay">
            <div class="overlay-panel myCenter overlay-left">
              <h1>已有帐号？</h1>
              <p>请登录🚀</p>
              <button class="ghost" @click="signIn()">登录</button>
            </div>
            <div class="overlay-panel myCenter overlay-right">
              <h1>没有帐号？</h1>
              <p>立即注册吧😃</p>
              <button class="ghost" @click="signUp()">注册</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import mixins from "@/utils/mixins";
const reg = /\w[-.\w]*\@[-a-z0-9]+(\.[-a-z0-9]+)*\.(com|cn|edu|uk)/gi;
export default {
  mixins: [mixins],
  data() {
    return {
      username: "",
      password: "",
      email: "",
      code: "",
      account: "",
    };
  },
  created() {
    this.getBackGroundImg();
  },
  methods: {
    signUp() {
      document
        .querySelector("#loginAndRegist")
        .classList.add("right-panel-active");
    },
    signIn() {
      document
        .querySelector("#loginAndRegist")
        .classList.remove("right-panel-active");
    },
    changeDialog() {
      if (!this.account) {
        this.$message({
          message: "请输入登录账号",
          type: "error",
        });
        return false;
      } else {
        this.$createHttp.sendCode({email: this.email}).then((res) => {
          if (res.code === 200) {
            this.$message({
              message: "验证码已发送邮箱！",
              type: "success",
            });
            this.time = 60;
            setInterval(() => {
              this.time--;
            });
          }
        }).catch((error) => {
          this.$message({
            message: error,
            type: "error"
          });
        })
      }
    },
    login() {
      if (!this.account || !this.password) {
        this.$message({
          message: "请输入账号或密码！",
          type: "error",
        })
        return;
      }
      let user = {
        username: this.account,
        password: this.password,
      };
      this.$createHttp.login(user).then((res) => {
        if (res.code === 200) {
          this.$message({
            message: "登录成功",
            type: "success",
          });
          localStorage.setItem("token", res.data);
          this.getUserInfo();
          setTimeout(() => {
            this.$router.push("/");
          }, 1000);
        }
      }).catch((error) => {
        this.$message({
          message: error,
          type: "error"
        });
      });
    },
    register() {
      if (reg.test(this.email)){
        this.$message({
          message: "请输入正确邮箱！",
          type: "error",
        });
        return;
      }
      if (!this.username || !this.password) {
        this.$message({
          message: "请输入账号或密码！",
          type: "error",
        });
        return;
      }
      if (!this.email || !this.code) {
        this.$message({
          message: "请输入邮箱或验证码！",
          type: "error",
        });
        return;
      }
      let user = {
        username: this.username,
        password: this.password,
        email: this.email,
        code: this.code,
      };
      this.$createHttp.register(user).then((res) => {
        if (res.code === 200) {
          this.$message({
            message: "注册成功！",
            type: "success",
          });
          let loginUser = {
            username: this.username,
            password: this.password
          }
          //注册成功后自动登录
          this.$createHttp.login(loginUser).then((res) => {
            if (res.code === 200) {
              this.$message({
                message: "登录成功",
                type: "success",
              });
              localStorage.setItem("token", res.data);
              this.getUserInfo();
              setTimeout(() => {
                this.$router.push("/");
              }, 1000);
            }
          }).catch((error) => {
            this.$message({
              message: error,
              type: "error"
            });
          });
        } else {
          this.$message({
            message: res.msg,
            type: "error",
          });
        }
      });
    },
    getUserInfo() {
      this.$createHttp.userInfo().then((res) => {
        if (res.code === 200) {
          this.$store.commit("userInfo", res.data);
        }
      });
    }
  },
};
</script>

<style scoped>
.in-up-container {
  height: 100vh;
  position: relative;
}

.in-up {
  opacity: 0.9;
  border-radius: 10px;
  box-shadow: 0 15px 30px var(--miniMask), 0 10px 10px var(--miniMask);
  position: relative;
  overflow: hidden;
  width: 750px;
  max-width: 100%;
  min-height: 450px;
  margin: 10px;
}

.in-up p {
  font-size: 14px;
  letter-spacing: 1px;
  margin: 20px 0 30px 0;
}

.in-up a {
  color: var(--black);
  font-size: 14px;
  text-decoration: none;
  margin: 15px 0;
}

.form-container {
  position: absolute;
  height: 100%;
  transition: all 0.5s ease-in-out;
}

.sign-in-container {
  left: 0;
  width: 50%;
}

.sign-up-container {
  left: 0;
  width: 50%;
  opacity: 0;
}

.form-container div {
  background: var(--white);
  flex-direction: column;
  padding: 0 20px;
  height: 100%;
}

.form-container input {
  background: var(--maxLightGray);
  border-radius: 2px;
  border: none;
  padding: 12px 15px;
  margin: 10px 0;
  width: 100%;
  outline: none;
}

.in-up button {
  border-radius: 2rem;
  border: none;
  background: var(--lightRed);
  color: var(--white);
  font-size: 16px;
  font-weight: bold;
  padding: 12px 45px;
  letter-spacing: 2px;
  cursor: pointer;
}

.in-up button:hover {
  animation: scale 0.8s ease-in-out;
}

.in-up button.ghost {
  background: transparent;
  border: 1px solid var(--white);
}

.sign-up-container button {
  margin-top: 20px;
}

.overlay-container {
  position: absolute;
  left: 50%;
  width: 50%;
  height: 100%;
  overflow: hidden;
  transition: all 0.5s ease-in-out;
}

.overlay {
  background: var(--gradualRed);
  color: var(--white);
  position: relative;
  left: -100%;
  height: 100%;
  width: 200%;
}

.overlay-panel {
  position: absolute;
  top: 0;
  flex-direction: column;
  height: 100%;
  width: 50%;
  transition: all 0.5s ease-in-out;
}

.overlay-right {
  right: 0;
  transform: translateY(0);
}

.overlay-left {
  transform: translateY(-20%);
}

.in-up.right-panel-active .sign-in-container {
  transform: translateY(100%);
}

.in-up.right-panel-active .overlay-container {
  transform: translateX(-100%);
}

.in-up.right-panel-active .sign-up-container {
  transform: translateX(100%);
  opacity: 1;
}

.in-up.right-panel-active .overlay {
  transform: translateX(50%);
}

.in-up.right-panel-active .overlay-left {
  transform: translateY(0);
}

.in-up.right-panel-active .overlay-right {
  transform: translateY(20%);
}

.user-title div {
  height: 55px;
  line-height: 55px;
  text-align: center;
}

.user-content > div {
  height: 55px;
  display: flex;
  align-items: center;
}

.user-content >>> .el-input__inner,
.user-content >>> .el-textarea__inner {
  border: none;
  background: var(--whiteMask);
}

.user-content >>> .el-input__count {
  background: var(--transparent);
  user-select: none;
}

@media screen and (max-width: 920px) {
}
</style>
